<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jquery的选择器</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <h2 class="test">这是一个标题</h2>
    <p>这是一个段落。</p>
    <p class="test">这是另一个段落。</p>
    <button>点我</button>

    <hr>
    <p>List 1:</p>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
        <li>Tea</li>
    </ul>

    <p>List 2:</p>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
        <li>Tea</li>
    </ul>

    <button>点我</button>

    <p><a href="//www.runoob.com/html/">HTML 教程</a></p>
    <p><a href="//www.runoob.com/css/">CSS 教程</a></p>

    <p><a href="//www.runoob.com/html/" target="_blank">HTML教程</a></p>

    这是一个按钮输入框:<input type="button">

    <hr>

    <table border="1" cellspacing="0">
        <tr>
            <th>网站名</th>
            <th>网址</th>
        </tr>
        <tr>
            <td>Google</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>Baidu</td>
            <td>http://www.baidu.com</td>
        </tr>
        <tr>
            <td>菜鸟教程</td>
            <td>http://www.runoob.com</td>
        </tr>
        <tr>
            <td>淘宝</td>
            <td>http://www.taobao.com</td>
        </tr>
        <tr>
            <td>Facebook</td>
            <td>http://www.facebook.com</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    /*
 元素选择器:
     $(document).ready(function (){
         $("button").click(function (){
             $("p").hide();
         })
     })
 */


    /*
    id选择器:
        $(function (){
            $('button').click(function (){
                $("#test").hide()
            })
        })
    */

    /*
    class选择器
        $(function (){
            $('button').click(function (){
                $('.test').hide()
            })
        })
    */
    /*
    *:表示选取所有的元素
         $(function (){
             $('button').click(function (){
                 $("*").hide()
             })
         })
     */

    /* 
    this:表示是当前HTML的元素
       $(function(){
           $('button').click(function(){
               $(this).hide()
           })
       }) 
    */

    /* 
        // "h2.test":表示选中当前class为test的h2标签
        $(function(){
                $('button').click(function(){
                    $("h2.test").hide()
                })
            })  
        */

    /* 
        // "p:first"表示选中的是第一个p元素
            $(function(){
                $('button').click(function(){
                    $("p:first").hide()
                })
            })   
        */

    /* 
        // "ul li:first":表示选中的是ul 下的li的第一个元素
        $(function(){
            $('button').click(function(){
                $("ul li:first").hide()
            })
        }) 
    */

    /* 
        // "ul li:first-child":表示的是选取每个 <ul> 元素的第一个 <li> 元素
        $(function(){
                $('button').click(function(){
                    $("ul li:first-child").hide()
                })
            })  
        */

    /* 
    // 
        "[href]":选中带有href属性的元素
        $(function(){
                $('button').click(function(){
                    $("[href]").hide()
                })
            })  
         */

    /* 
        // "a[target='_blank']":选中带有target属性为'_blank'值的a标签
        $(document).ready(function(){
            $('button').click(function(){
                $("a[target='_blank']").hide()
            })
        })       
    */

    /* // "a[target!='_blank']":选中带有target属性不为'_blank'值的a标签
    $(document).ready(function(){
            $('button').click(function(){
                $("a[target!='_blank']").hide()
            })
        })    
        */

    /*  
     // :button:选中type值为button的input或者button标签
         $(document).ready(function(){
             $('button').click(function(){
                 $(":button").hide()
             })
         })    
     */

   /*  
    //  "tr:even":选取偶数位置的 <tr> 元素
        $(function(){
            $("tr:even").css("background-color","yellow")
        }) 
    */
    
    //  "tr:odd":选取奇数位置的 <tr> 元素
   $(function(){
       $("tr:odd").css("background-color","yellow")
   })
</script>

</html>